﻿@page "/components/text"
@page "/components/typography"

<PageOutlet Url="components/text"
            Title="Text"
            Description="text component of the bit BlazorUI components" />

<DemoPage Name="Text"
          Description="Use text to present your design and content as clearly and efficiently as possible."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          GitHubUrl="Utilities/Text/BitText.cs"
          GitHubDemoUrl="Utilities/Text/BitTextDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitText>This is default (Subtitle1)</BitText>
        <br /><br />
        <BitText Typography="BitTypography.H1">H1. Heading</BitText>
        <br />
        <BitText Typography="BitTypography.H2">H2. Heading</BitText>
        <br />
        <BitText Typography="BitTypography.H3">H3. Heading</BitText>
        <br />
        <BitText Typography="BitTypography.H4">H4. Heading</BitText>
        <br />
        <BitText Typography="BitTypography.H5">H5. Heading</BitText>
        <br />
        <BitText Typography="BitTypography.H6">H6. Heading</BitText>
        <br /><br />
        <BitText Typography="BitTypography.Subtitle1">Subtitle1. Once upon a time</BitText>
        <br />
        <BitText Typography="BitTypography.Subtitle2">Subtitle2. Once upon a time</BitText>
        <br /><br />
        <BitText Typography="BitTypography.Body1">Body1. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.</BitText>
        <br />
        <BitText Typography="BitTypography.Body2">Body2. Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.</BitText>
        <br /><br />
        <BitText Typography="BitTypography.Button">Button. Click Me</BitText>
        <br />
        <BitText Typography="BitTypography.Caption1">Caption1. Hello World!</BitText>
        <br />
        <BitText Typography="BitTypography.Caption2">Caption2. Hello World!</BitText>
        <br />
        <BitText Typography="BitTypography.Overline">Overline. this is overline text.</BitText>
    </DemoExample>

    <DemoExample Title="Wrapping" RazorCode="@example2RazorCode" Id="example2">
        <b>Normal wrap (default):</b><br />
        <BitText Style="width:250px">Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.</BitText>
        <br /><br /><br />
        <b>NoWrap:</b><br />
        <BitText Style="width:250px" NoWrap>Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.</BitText>
        <br /><br /><br />
        <b>ForceBreak:</b><br />
        <BitText Style="width:250px" ForceBreak>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</BitText>
    </DemoExample>

    <DemoExample Title="Align" RazorCode="@example3RazorCode" Id="example3">
        <BitText Align="BitTextAlign.Start">Start</BitText>
        <br />
        <BitText Align="BitTextAlign.Center">Center</BitText>
        <br />
        <BitText Align="BitTextAlign.End">End</BitText>
    </DemoExample>

    <DemoExample Title="Foreground" RazorCode="@example4RazorCode" Id="example4">
        <BitText Foreground="BitColorKind.Primary">Primary foreground</BitText>
        <br />
        <BitText Foreground="BitColorKind.Secondary">Secondary foreground</BitText>
        <br />
        <BitText Foreground="BitColorKind.Tertiary">Tertiary foreground</BitText>
        <br />
        <div style="background:linear-gradient(blue, pink);background-clip:text;">
            <BitText Foreground="BitColorKind.Transparent">Transparent foreground</BitText>
        </div>
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example5RazorCode" Id="example5">
        <BitText Color="BitColor.Primary">Primary color</BitText>
        <br />
        <BitText Color="BitColor.Secondary">Secondary color</BitText>
        <br />
        <BitText Color="BitColor.Tertiary">Tertiary color</BitText>
        <br />
        <BitText Color="BitColor.Info">Info color</BitText>
        <br />
        <BitText Color="BitColor.Success">Success color</BitText>
        <br />
        <BitText Color="BitColor.Warning">Warning color</BitText>
        <br />
        <BitText Color="BitColor.SevereWarning">SevereWarning color</BitText>
        <br />
        <BitText Color="BitColor.Error">Error color</BitText>
        <br />
        <div style="background:var(--bit-clr-fg-sec);padding:1rem">
            <BitText Color="BitColor.PrimaryBackground">PrimaryBackground color</BitText>
            <br />
            <BitText Color="BitColor.SecondaryBackground">SecondaryBackground color</BitText>
            <br />
            <BitText Color="BitColor.TertiaryBackground">TertiaryBackground color</BitText>
        </div>
        <br />
        <BitText Color="BitColor.PrimaryForeground">PrimaryForeground color</BitText>
        <br />
        <BitText Color="BitColor.SecondaryForeground">SecondaryForeground color</BitText>
        <br />
        <BitText Color="BitColor.TertiaryForeground">TertiaryForeground color</BitText>
        <br />
        <BitText Color="BitColor.PrimaryBorder">PrimaryBorder color</BitText>
        <br />
        <BitText Color="BitColor.SecondaryBorder">SecondaryBorder color</BitText>
        <br />
        <BitText Color="BitColor.TertiaryBorder">TertiaryBorder color</BitText>
    </DemoExample>
</DemoPage>
